<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>设置页面</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .settings-container {
      width: 300px;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 16px;
      color: #fff;
      font-size: 14px;
      box-shadow: 0 0 8px rgba(0,0,0,0.3);
      position: relative;
      z-index: 1;
    }

    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 8px;
    }

    .setting-item label {
      font-size: 13px;
      white-space: nowrap;
      width: 80px;
      flex-shrink: 0;
    }

    .custom-select {
      flex: 1;
      position: relative;
      background: rgba(255,255,255,0.2);
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
    }

    .custom-select .selected {
      color: #fff;
    }

    .custom-select .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(8px);
      border-radius: 8px;
      margin-top: 4px;
      z-index: 9999;
    }

    .custom-select .dropdown div {
      padding: 8px 10px;
      color: #fff;
      cursor: pointer;
    }

    .custom-select .dropdown div:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .open-app {
      margin-top: 20px;
      width: 100%;
      padding: 8px;
      border: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.3);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="settings-container">
    <div class="setting-item">
      <label>对方语言：</label>
      <div class="custom-select" onclick="toggleDropdown(this)">
        <div class="selected">自动识别</div>
        <div class="dropdown">
          <div onclick="selectOption(this)">自动识别</div>
          <div onclick="selectOption(this)">英语</div>
          <div onclick="selectOption(this)">中文</div>
        </div>
      </div>
    </div>

    <div class="setting-item">
      <label>你的语言：</label>
      <div class="custom-select" onclick="toggleDropdown(this)">
        <div class="selected">自动识别</div>
        <div class="dropdown">
          <div onclick="selectOption(this)">自动识别</div>
          <div onclick="selectOption(this)">英语</div>
          <div onclick="selectOption(this)">中文</div>
        </div>
      </div>
    </div>

    <div class="setting-item">
      <label>收音来源：</label>
      <div class="custom-select" onclick="toggleDropdown(this)">
        <div class="selected">手机麦克风</div>
        <div class="dropdown">
          <div onclick="selectOption(this)">手机麦克风</div>
          <div onclick="selectOption(this)">蓝牙耳机</div>
        </div>
      </div>
    </div>

    <div class="setting-item">
      <label>音色：</label>
      <div class="custom-select" onclick="toggleDropdown(this)">
        <div class="selected">男声</div>
        <div class="dropdown">
          <div onclick="selectOption(this)">男声</div>
          <div onclick="selectOption(this)">女声</div>
        </div>
      </div>
    </div>

    <button class="open-app" onclick="openApp()">打开app</button>
  </div>

  <script>
    function toggleDropdown(el) {
      const dropdown = el.querySelector('.dropdown');
      const isVisible = dropdown.style.display === 'block';
      document.querySelectorAll('.custom-select .dropdown').forEach(d => d.style.display = 'none');
      if (!isVisible) dropdown.style.display = 'block';
    }

    function selectOption(el) {
      const selected = el.closest('.custom-select').querySelector('.selected');
      selected.textContent = el.textContent;
      el.parentElement.style.display = 'none';
    }
	
	
	function openApp() {
		
			 if (window.Android && window.Android.callback) {
				// const msg = { type: 'openApp', data: '跳转至主界面' };
				// window.Android.callback("sendMessage", JSON.stringify(msg));
				
				// 启动主应用
				Android.goApp();
			  } else {
				// 可选兜底方案
				window.location.href = 'mytranslatorapp://home';
			  }
	}

    document.addEventListener('click', function(e) {
      if (!e.target.closest('.custom-select')) {
        document.querySelectorAll('.custom-select .dropdown').forEach(d => d.style.display = 'none');
      }
    });
  </script>
</body>
</html>
